import { SelectFileToSave } from "@app";
import { FilePanelProps, useBlockNoteEditor } from "@blocknote/react"
import { Button, Input, Space, Tabs, TabsProps, notification } from "antd";
import { FC, useState } from "react"

type InlineContentSchema = import("@blocknote/core").InlineContentSchemaFromSpecs<{
    text: {
        config: "text";
        implementation: any;
    };
    link: {
        config: "link";
        implementation: any;
    };
}>

type StyleSchema = import("@blocknote/core").StyleSchemaFromSpecs<{
    bold: {
        config: {
            type: string;
            propSchema: "boolean";
        };
        implementation: import("@blocknote/core").StyleImplementation;
    };
    italic: {
        config: {
            type: string;
            propSchema: "boolean";
        };
        implementation: import("@blocknote/core").StyleImplementation;
    };
    underline: {
        config: {
            type: string;
            propSchema: "boolean";
        };
        implementation: import("@blocknote/core").StyleImplementation;
    };
    strike: {
        config: {
            type: string;
            propSchema: "boolean";
        };
        implementation: import("@blocknote/core").StyleImplementation;
    };
    code: {
        config: {
            type: string;
            propSchema: "boolean";
        };
        implementation: import("@blocknote/core").StyleImplementation;
    };
    textColor: {
        config: {
            type: string;
            propSchema: "string";
        };
        implementation: import("@blocknote/core").StyleImplementation;
    };
    backgroundColor: {
        config: {
            type: string;
            propSchema: "string";
        };
        implementation: import("@blocknote/core").StyleImplementation;
    };
}>



export const CustomFilePanelController: FC<FilePanelProps<InlineContentSchema, StyleSchema>> = ({ block }) => {
    const [inputValue, setInputValue] = useState('');
    const editor = useBlockNoteEditor();

    const embedClick = () => {
        const fileName = inputValue.split('/').pop()
        editor.updateBlock(block, {
            props: {
                name: fileName,
                url: inputValue,
            }
        })
    }

    const selectFileClick = () => {

        SelectFileToSave().then(uploadInfo => {
            editor.updateBlock(block, {
                props: {
                    name: uploadInfo.originFileName,
                    url: `/file/${uploadInfo.fileName}`,
                }
            })
        }).catch((err: any) => {
            notification.error({
                message: '保存文件失败!',
                description: err,
                placement: 'bottomRight',
            })
        })
    }

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '添加',
            children: <Button onClick={selectFileClick}>添加</Button>,
        },
        {
            key: '2',
            label: '嵌入',
            children: <Space.Compact style={{ width: '100%' }}>
                <Input value={inputValue} onChange={e => { setInputValue(e.target.value) }} />
                <Button type="primary" onClick={embedClick}>确定</Button>
            </Space.Compact>,
        },
    ];


    return <>
        <Tabs style={{ width: '300px', background: '#ffffff', border: '1px solid #EEEEEE', padding: '5px' }} defaultActiveKey="1" items={items} />
    </>
}
